<%--
  Created by IntelliJ IDEA.
  User: wagger
  Date: 2019/06/02
  Time: 下午 11:43
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <meta charset="UTF-8"/>
    <title>Traveler Blog -->文章添加</title>
    <link rel="stylesheet" type="text/css" href="/client/css/common.css"/>
    <link rel="stylesheet" type="text/css" href="/client/css/main.css"/>
    <link href="/client/css/bootstrap.min.css" type="text/css" rel="stylesheet">
    <link href="/client/css/style.css" type="text/css" rel="stylesheet">
    <link type="text/css" href="/client/css/nprogress.css" rel="stylesheet">
    <script src="/client/js/jquery-2.1.4.min.js" type="text/javascript"></script>
    <script src="/client/js/jquery-form.js" type="text/javascript"></script>
    <link rel="shortcut icon" href="/client/images/tou.ico">
    <script type="application/javascript">
        function addProducts() {
            var option = {
                url:"/admin/addArtile.do",
                type:"post",
                headers:{"ClientCallMode":"ajax"},
                success:function (data) {
                    alert(data.message);
                    if (data.status == 0) {
                        window.location.href="/admin/findAllArtile.do";
                    }
                }
            };
            /*myform是表单的id*/
            $("#myform").ajaxSubmit(option);
            return false;
        }
    </script>
</head>
<body>
<jsp:include page="/client/head.jsp"/>
<div class="main-wrap">
<div class="result-wrap">
    <div class="result-content">
        <form action="/admin/addArtile.do" method="post" id="myform" name="myform" enctype="multipart/form-data">
            <table class="insert-tab" width="100%">
                <tbody><tr>
                    <th width="120"><i class="require-red">*</i>分类：</th>
                    <td>
                        <select name="tags"  class="required">
                            <option selected="selected">--选择类别--</option>
                            <c:forEach items="${search}" var="search">
                                <option value="${search.tags}">${search.tags}</option>
                            </c:forEach>
                        </select>
                    </td>
                </tr>
                <tr>
                    <th><i class="require-red">*</i>标题：</th>
                    <td>
                        <input class="common-text required" id="title" name="title" size="50" value="" type="text">
                    </td>
                </tr>
                <tr>
                    <th>作者：</th>
                    <td><p name="author">${username}</p></td>
                </tr>
                <tr>
                    <th><i class="require-red">*</i>缩略图：</th>
                    <td><input name="uploadFile" id="uploadFile" type="file"></td>
                    <td><div id="bcd"></div></td>
                </tr>
                <tr>
                    <th>内容：</th>
                    <td><textarea name="page" class="common-textarea" id="content" cols="30" style="width: 98%;" rows="10"></textarea></td>
                </tr>
                <tr>
                    <th></th>
                    <td>
                        <button class="btn btn-primary btn6 mr10" type="button" onclick="addProducts()">提交</button>
                        <input class="btn btn6" onClick="history.go(-1)" value="返回" type="button">
                    </td>
                </tr>
                </tbody>
            </table>
        </form>
    </div>
</div>
</div>
<script>
    $(function() {
        $("#uploadFile").change(function(e) {
            var imgBox = e.target;
            uploadImg($('#bcd'), imgBox)
        });

        function uploadImg(element, tag) {
            var file = tag.files[0];
            var imgSrc;
            if (!/image\/\w+/.test(file.type)) {
                alert("看清楚，这个需要图片！");
                return false;
            }
            var reader = new FileReader();
            reader.readAsDataURL(file);
            reader.onload = function() {
                console.log(this.result);
                imgSrc = this.result;
                var imgs = document.createElement("img");
                $(imgs).attr("src", imgSrc);
                $(imgs).attr("width","120px");
                $(imgs).attr("height","70px");
                element.append(imgs);
            };
        }
    })
</script>

</body>
</html>
